<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{asset('/css/web/user/comment.css')}}">
    <script src="{{asset('/js/web/user/comment.js')}}"></script>
</head>
<body>
@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
        @include('web.layout.buyer_nav')
        <div class="nav_right flr">
            <div class="base_content">
                <div class="line_title">订单跟踪</div>
                <div class="content">
                    <form action="/member/buyer/orders/{{$order_id}}/comments" method="post">
                        {{csrf_field()}}
                        @if($order_products)
                        @foreach($order_products as $order_product)
                            @if(!$order_product['is_appraise'])
                            <input type="hidden" name="order_product[{{$order_product['id']}}][product_id]" value="{{$order_product['product_id']}}">
                            <div class="each-product-item">
                                <div class="content-top">
                                    <div class="imgbox fl">
                                        <a href="/product/info/{{$order_product['product_id']}}/{{$order_product['sku_id']}}" target="_blank">
                                            <img src="{{$order_product['product_img_url']}}" alt="" style="width:300px;height: 300px;">
                                        </a>
                                    </div>
                                    <div class="detbox fl">
                                        <a href="/product/info/{{$order_product['product_id']}}/{{$order_product['sku_id']}}"><h5 class="com-title">{{$order_product['product_name']}}</h5></a>
                                        <div class="com-price">价格：<span>￥{{$order_product['product_money']}}</span>元</div>
                                        <div class="com-details">配送：<span>{{$order_product['freight']}}</span></div>
                                        <div class="com-evaluate">
                                            <span class="">评价：</span>
                                                @if($comment_count = array_get($order_product, 'product.comment_count'))
                                                    <?php
                                                        $score = array_get($order_product, 'product.comment_score', 0) / $comment_count;
                                                        $score = floor(floor($score * 10)/5) * 5 / 10;
                                                    ?>
                                                    <div id="startone"  class="block clearfix" >
                                                          <div class="star_score">
                                                              <a href="javascript:void(0)" style="left: 0px; width: 16px; z-index: 10;" class="{{$score == 0.5 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 32px; z-index: 9;" class="{{$score == 1 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 48px; z-index: 8;" class="{{$score == 1.5 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 64px; z-index: 7;" class="{{$score == 2 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 80px; z-index: 6;" class="{{$score == 2.5 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 96px; z-index: 5;" class="{{$score == 3 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 112px; z-index: 4;" class="{{$score == 3.5 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 128px; z-index: 3;" class="{{$score == 4 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 144px; z-index: 2;" class="{{$score == 4.5 ? 'clibg' : ''}}"></a>
                                                              <a href="javascript:void(0)" style="left: 0px; width: 160px; z-index: 1;" class="{{$score == 5 ? 'clibg' : ''}}"></a>
                                                          </div>
                                                          <p style="float:left;"><span class="fenshu">{{$score}}</span> 分</p>
                                                    </div>
                                                    <i>(累计评价 {{$order_product['product']['comment_count']}} )</i>
                                                @else
                                                    暂无评价
                                                @endif
                                        </div>
                                        <div class="com-lens">
                                            <?php
                                                if( $order_product['sku']['attributes'] && $attrs = json_decode($order_product['sku']['attributes'], 1)){
                                                    $value = '';
                                                    $i = 0;
                                                    foreach($attrs as $attr){
                                                        $value .= " " . $attr['attr_name'] . ":<span>" . $attr['val'] . "</span>";
                                                    }
                                                    echo $value;
                                                }
                                            ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="content-bot">
                                    <div class="content-left">
                                            <div class="bot-title">
                                                <h4 class="all">总体评价</h4>
                                                <div class="com-description all_description">
                                                    <form action="" method="get">
                                                        <label class="radio"><input type="radio" name="order_product[{{$order_product['id']}}][overall]" value="1" class="overall" checked><i></i>好评</label>
                                                        <label class="radio"><input type="radio" name="order_product[{{$order_product['id']}}][overall]" value="2" class="overall"><i></i>中评</label>
                                                        <label class="radio"><input type="radio" name="order_product[{{$order_product['id']}}][overall]" value="3" class="overall"><i></i>差评</label>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="bot-title">
                                                <span>商品评价</span>
                                                <div class="com-description">
                                                    <ul class="com-starbox" comClick="0">
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start1">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start2">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="start3">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start4">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start5">
                                                        </li>
                                                    </ul>
                                                    <input name="order_product[{{$order_product['id']}}][product_comment]" type="hidden" class="starHid product_comment" value="">
                                                </div>
                                                <p class="number"></p>
                                             </div>
                                            <div class="bot-title">
                                                <span>卖家服务</span>
                                                <div class="com-description">
                                                    <ul class="com-starbox" comClick="0">
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start1">

                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start2">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="start3">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start4">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start5">
                                                        </li>
                                                    </ul>
                                                    <input name="order_product[{{$order_product['id']}}][seller_comment]" type="hidden" class="starHid seller_comment" value="">
                                                </div>
                                                <p class="number"></p>
                                            </div>
                                            <div class="bot-title">
                                                <span>物流服务</span>
                                                <div class="com-description">
                                                    <ul class="com-starbox" comClick="0">
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start1">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start2">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="start3">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start4">
                                                        </li>
                                                        <li>
                                                            <img src="{{asset('/img/web/inc/icon/star1.png')}}" alt="" class="com-star1 start5">
                                                        </li>
                                                    </ul>
                                                    <input  name="order_product[{{$order_product['id']}}][logistics_comment]" type="hidden" class="starHid logistics_comment" value="">
                                                </div>
                                                <p class="number"></p>
                                            </div>
                                    </div>
                                    <div class="content-right">
                                         <div class="bot-con">
                                            <span>评价</span>
                                            <textarea name="order_product[{{$order_product['id']}}][comment]" class="comment" placeholder="请填写评论" ></textarea>
                                            <div class=" tit-bot">还可以输入<span id="enterLetter" style="color:#ff4c51;">&nbsp;500&nbsp;</span>字</div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @endforeach
                                <div class="content-inp">
                                    <input type="submit" class="jm_btn5" value="提交">
                                </div>
                                @endif
                            </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" value="{{asset('/img/web/inc/icon/star1.png')}}" id="star1">
<input type="hidden" value="{{asset('/img/web/inc/icon/star2.png')}}" id="star2">
@include('web.layout.footer')

<script type="text/javascript">
    $(function(){
        $(".jm_btn5").on('click', function(event) {
            event.preventDefault();
            var $product_item = $(this).parents('.each-product-item');

            var overall = '';
            var product_comment = $product_item.find('.product_comment').val();
            var seller_comment = $product_item.find('.seller_comment').val();
            var logistics_comment = $product_item.find('.logistics_comment').val();
            var comment = $product_item.find('.comment').val();
            $(".overall").each(function(index, el) {
                if ($(this).is(":checked")) {
                    overall +=$(this).val()+";";
                }
            });
            console.log(overall)
            if(!overall){
                layer.alert('总体评价未选择',{icon: 0});
                return false;
            }
            if(!product_comment){
                layer.alert('商品评价未选择',{icon: 0});
                return false;
            }
            if(!seller_comment){
                layer.alert('卖家评价未选择',{icon: 0});
                return false;
            }
            if(!logistics_comment){
                layer.alert('物流服务为选择',{icon: 0});
                return false;
            }
            if(!comment){
                layer.alert('评价内容未填',{icon: 0});
                return false;
            }
            $('form').submit();
        });
        $('.start1').click(function(event){
            event ? event : window.event;
            var obj = event.srcElement ? event.srcElement : event.target; 
            var $obj = $(obj);
            $obj.parent().parent().parent().next(".number").show().html("1分,失望")
        });
        $('.start2').click(function(event){
            event ? event : window.event;
            var obj = event.srcElement ? event.srcElement : event.target; 
            var $obj = $(obj); 
            $obj.parent().parent().parent().next(".number").show().html("2分,不满")
        })
        $('.start3').click(function(event){
            event ? event : window.event;
            var obj = event.srcElement ? event.srcElement : event.target; 
            var $obj = $(obj); 
            $obj.parent().parent().parent().next(".number").show().html("3分,一般")
        })
        $('.start4').click(function(event){
            event ? event : window.event;
            var obj = event.srcElement ? event.srcElement : event.target; 
            var $obj = $(obj); 
            $obj.parent().parent().parent().next(".number").show().html("4分,满意")
        })
        $('.start5').click(function(event){
            event ? event : window.event;
            var obj = event.srcElement ? event.srcElement : event.target; 
            var $obj = $(obj); 
            $obj.parent().parent().parent().next(".number").show().html("5分,惊喜")
        })
         scoreFun($("#startone"))
         scoreFun($("#starttwo"),{
               fen_d:22,//每一个a的宽度
               ScoreGrade:5//a的个数5
             });
         //显示分数
          $(".show_number li p").each(function(index, element) {
            var num=$(this).attr("tip");
            var www=num*2*16;//
            $(this).css("width",www);
            $(this).parent(".atar_Show").siblings("span").text(num+"分");
        });
    });

</script>
</body>
</html>